<template>
	<view class="page">
		<view class="box_1">
			<!-- 顶部导航栏组件 -->
			<QSNavbar :navbarItems="navbarItems_1" backgroundColor="#ffffff" ref="navbar"></QSNavbar>
			<view class="box_9">
				<!-- 下拉框 -->
				<!-- <view class="content" v-if="dropdownmenu">
					<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(2)" ref="dropdown1" active-color="#1989fa">
						<zb-dropdown-item :options="option" v-model="value4" @change="change1"
							name="first"></zb-dropdown-item>
						<zb-dropdown-item :options="option2" v-model="value5" name="two" @change="change1"></zb-dropdown-item>
					</zb-dropdown-menu>
				</view> -->
				<view class="box_11">
					<view class="image-wrapper_7">
						<u-search @search="search" @custom="search" placeholder="搜索" :showAction="false"
							v-model="searchKey">
						</u-search>
					</view>
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/28d5217388bfa211721ff7caa4c0c1dfd1650824.png"
						class="label_7" @click="dropdownclick"></image>
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/a0caafa1d0f5c11490a41f203aab143debf439d6.png"
						class="label_8"></image>
				</view>


				<view class="" style="margin-top: 100rpx;">
					<u-sticky>
						<u-tabs :list="tabsList" lineColor="#886cff" :activeStyle="{
								color: '#886cff'
							}" :inactiveStyle="{
								color: '#353535'
							}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
					</u-sticky>
				</view>

				<view class="list_1">
					<scroll-view scroll-y="true" style="width: 100%;
					height: 76vh;
					overflow: hidden;">
					<view class="block_1" v-for="(item,index) in 10" :key="index" @click="merchant(item,index)">
						<view class="box_1">
							<view class="image-wrapper_1">
								<image
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f88d54faf41fd6b23f1b01d65dcedab4e4c26cc3.png"
									class="image_4"></image>
							</view>
							<view class="box_2">
								<view class="text-group_1">
									<text lines="1" class="text_2">一饭当鲜</text>
									<text lines="1" class="text_3">来段副标题~</text>
								</view>
								<view class="block_2">
									<view class="text-wrapper_1">
										<text lines="1" class="text_4">标签</text>
									</view>
									<view class="text-wrapper_2">
										<text lines="1" class="text_5">标签</text>
									</view>
								</view>
								<view class="block_3">
									<view class="group_3">
										<image style="width: 59rpx;height: 59rpx;" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f88d54faf41fd6b23f1b01d65dcedab4e4c26cc3.png" mode=""></image>
									</view>
									<view class="group_4">
										<image style="width: 59rpx;height: 59rpx;" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f88d54faf41fd6b23f1b01d65dcedab4e4c26cc3.png" mode=""></image>
									</view>
								</view>
							</view>
							<text lines="1" class="text_6">距您3km</text>
						</view>
						<view class="image-wrapper_2">
							<image
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9590adb2a7ee5b70de0f30d3121306b463675e8b.png"
								class="image_5"></image>
						</view>
					</view>
					</scroll-view>
				</view>
			</view>

			<view class="cons_contenter" v-if="dropdownmenu" @click="dropdownmenulist"></view>
			<view class="cons_con" v-if="dropdownmenu">
				<view class="cons_con_contenter" v-for="(item,index) in droplist" :key="index"
					@click='fieldclick(item,index)'>
					<view class="date-item_left">
						<view class="actives" v-if="dateActive === index">{{item.name}}</view>
						<view class="text-group_14-0" v-else>{{item.name}}</view>
					</view>
					<view class="date-item_right">
						<image v-if="dateActive === index" :src="item.img" class="image_19-0"></image>
					</view>


				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	const index = require('@/api/personal/index.js')
	const venues = require("@/api/venues/venues.js");
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				currentTab: 0,
				tabsList: [{
						name: '分类'
					},
					{
						name: '分类'
					},
					{
						name: '分类'
					},
					{
						name: '分类'
					},
					{
						name: '分类'
					},
				],
				droplist: [{
					name: '价格由低到高',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26d8a9fada06c95955c8ba81836aa4d8b927c35f.png',
				}, {
					name: '价格由高到低',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26d8a9fada06c95955c8ba81836aa4d8b927c35f.png',
				}, {
					name: '销量排序',
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/26d8a9fada06c95955c8ba81836aa4d8b927c35f.png',
				}],
				dropdownmenu: false,
				value4: 0,
				value5: 'a',
				option: [{
						text: '全部商品',
						value: 0
					},
					{
						text: '新款商品',
						value: 1
					},
					{
						text: '活动商品',
						value: 2
					},
				],
				option2: [{
						text: '默认排序',
						value: 'a'
					},
					{
						text: '好评排序',
						value: 'b'
					},
					{
						text: '销量排序',
						value: 'c'
					},
				],
				navbarHeigth: null,
				assetsPath: this.$https.assetsPath,
				tabbar_index: 0,
				homeData: [],
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#000000",
					},
					{
						type: "text",
						text: "店铺列表",
						width: 70,
						weight: "bold",
						color: "#000000",
						textAlign: "left",
					},
				],
				userLoginPhone: '',
				heading: '',
				jifen: '',
				username: '',
				version_num: "",
				link_url: '',
				is_sure: 1,
				page_url: '/pages/find_index/find_index',
				dateActive: ''
			};
		},
		onLoad() {
			let that = this
			setTimeout(() => {
				this.value1 = 2
			}, 3000)
		},
		onShow() {},
		methods: {
			merchant(item,index){
				uni.navigateTo({
					url:'/page_commodity/commodity_detail'
				})
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
			},
			// 蒙版关闭
			dropdownmenulist() {
				this.dropdownmenu = false
			},
			// 打开蒙版/选择
			dropdownclick() {
				this.dropdownmenu = true
			},
			
			toggleItem(val) {
				// if (val === 1) {
				// 	this.$refs.dropdown1.close()
				// } else {
				// 	this.$refs.dropdown.close()
				// }
			},
			change1(val) {
				this.dropdownmenu = true
				console.log('===========', val, this.value1)
			},
			commoditylist(item, index) {
				uni.navigateTo({
					url: 'commodity_detail'
				})
			},
			// 分类点击
			fieldclick(item, index) {
				this.dateActive = index
				setTimeout(() => {
					this.dropdownmenu = false
				}, 200)
			},
		}
	}
</script>

<style lang="scss">
	@import url("@/static/css/personal/index.css");

	// .u-page__tag-item {
	// 	width: 100%;
	// 	height: 16rpx;
	// 	margin-left: 170rpx;
	// 	box-sizing: border-box;
	// }

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.box_1 {
		position: relative;
		width: 750rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.box_9 {
		/deep/.u-tabs {
			background-color: #fff;
			// border-bottom: 1px solid #E5E5E5;
			margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}
	}

	.box_11 {
		position: fixed;
		left: 0rpx;
		top: 160rpx;
		width: 750rpx;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		z-index: 999;
		background: #ffffff;
	}

	.list_a {
		width: 100%;
		height: 100rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;


	}

	.list_1 {
		width: 100%;
		height: auto;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0 0 30rpx;
		flex-wrap: wrap;

		.block_1 {
			box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.110000);
			background-color: rgba(255, 255, 255, 1.000000);
			border-radius: 10rpx;
			height: 233rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			width: 690rpx;
			position: relative;
			margin-top: 20rpx;
		}

		.box_1 {
			width: 643rpx;
			height: 193rpx;
			flex-direction: row;
			display: flex;
			margin: 20rpx 0 0 26rpx;
		}

		.image-wrapper_1 {
			height: 193rpx;
			// background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psfx63jh5qmdidlagmi8qaq0x4qnh14zfpcb95abd6-b412-4041-9789-39bdd205ab34) 100% no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			width: 195rpx;
		}

		.image_4 {
			width: 195rpx;
			height: 193rpx;
		}

		.box_2 {
			width: 173rpx;
			height: 193rpx;
			margin-left: 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.text-group_1 {
			width: 138rpx;
			height: 68rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.text_2 {
			width: 137rpx;
			height: 33rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 34rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin-left: 1rpx;
		}

		.text_3 {
			width: 121rpx;
			height: 21rpx;
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin-top: 14rpx;
		}

		.block_2 {
			width: 170rpx;
			height: 36rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 15rpx 0 0 3rpx;
		}

		.text-wrapper_1 {
			background-color: rgba(171, 198, 250, 1.000000);
			border-radius: 4rpx;
			height: 36rpx;
			display: flex;
			flex-direction: column;
			width: 80rpx;
		}

		.text_4 {
			width: 46rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
			margin: 7rpx 0 0 17rpx;
		}

		.text-wrapper_2 {
			background-color: rgba(251, 206, 220, 1.000000);
			border-radius: 4rpx;
			height: 36rpx;
			display: flex;
			flex-direction: column;
			width: 80rpx;
		}

		.text_5 {
			width: 46rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
			margin: 7rpx 0 0 17rpx;
		}

		.block_3 {
			width: 128rpx;
			height: 59rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 15rpx 0 0 3rpx;
		}

		.group_3 {
			background-color: rgba(73, 174, 227, 1.000000);
			width: 59rpx;
			height: 59rpx;
			display: flex;
			flex-direction: column;
		}

		.group_4 {
			background-color: rgba(73, 174, 227, 1.000000);
			width: 59rpx;
			height: 59rpx;
			display: flex;
			flex-direction: column;
		}

		.text_6 {
			width: 87rpx;
			height: 20rpx;
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 173rpx 0 0 174rpx;
		}

		.image-wrapper_2 {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 60rpx;
			height: 28rpx;
			display: flex;
			flex-direction: row;
		}

		.image_5 {
			width: 60rpx;
			height: 28rpx;
		}
	}

	.image-wrapper_7 {
		position: absolute;
		left: 30rpx;
		top: 30rpx;
		width: 541rpx;
		height: 62rpx;
		flex-direction: row;
		display: flex;
	}

	.label_7 {
		position: absolute;
		left: 606rpx;
		top: 44rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.label_8 {
		position: absolute;
		left: 676rpx;
		top: 44rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.image_7 {
		width: 55rpx;
		height: 26rpx;
		margin: 18rpx 0 0 30rpx;
	}

	.label_6 {
		width: 28rpx;
		height: 29rpx;
		margin: 17rpx 31rpx 0 397rpx;
	}



	.cons_contenter {
		position: absolute;
		animation-duration: 0.2s;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.7);
		transition: opacity 0.3s;
	}

	.cons_con {
		position: absolute;
		animation-duration: 0.2s;
		width: 100%;
		height: auto;
		top: 280rpx;
		left: 0;
		z-index: 999;
		background-color: #fff;
		transition: opacity 0.3s;
	}

	.cons_con_contenter {
		width: 90%;
		height: 80rpx;
		// padding: 0 30rpx;
		border-bottom: 1rpx #e5e5e5 solid;
		margin-left: 5%;
	}

	.date-item_right {
		color: #e5e5e5;
		float: right;
	}

	.date-item_left {
		float: left;
	}

	.image_19-0 {
		width: 30rpx;
		height: 30rpx;
		margin-top: 25rpx;
		margin-left: 30rpx;
	}

	.actives {
		color: #886cff;
		font-size: 28rpx;
		text-align: left;
		margin: 20rpx 0 0 27rpx;
	}

	.text-group_14-0 {
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		text-align: left;
		margin: 20rpx 0 0 27rpx;
	}
</style>